<template>
    <div class="detail">
        <!-- 商品信息主体 -->
        <div class="goods">
            <!-- 主图轮播 -->
            <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
                <van-swipe-item
                    v-for="photo in detail.photo"
                    :key="photo.id"
                >
                <van-image
                    :src="photo.url"
                />
                </van-swipe-item>
            </van-swipe>
        </div>
        <div class="goods-info">
            <div style="margin-top: 15px;">
                <span style="font-size: 5vw;font-weight: 700;color: red;">￥</span>
                <span style="font-size: 8vw;font-weight: 700;color: red;">{{ intPrice }}</span>
                <span style="font-size: 6vw; font-weight: 700;color: red;">.{{ floorPrice }}</span>
                <span style="margin-top: 15px;
                margin-left: 20px;
                color: #ccc;
                text-decoration: line-through;
                font-style: italic;
                ">
                原价：{{ detail.originPrice }}
                </span>
            </div>
            <div class="title" style="margin: 10px 0;font-weight: 800;">{{ detail.title }}</div>
            <!-- 最多显示一行 -->
            <div class="van-ellipsis" style="color: gray;">{{ detail.title }}</div>

        </div>
        <van-tabs v-model:active="active" style="margin-top: 10px;">
            <van-tab title="商品详情">
                <div v-for="image in detail.photo">
                    <img :src="image.url" alt="" style="width: 100%;height: 100%;">
                </div>
            </van-tab>
            <van-tab title="售后保障">
                <div style="margin: 10px 8px 10px;"> 本商品质保周期为1年质保,在此时间范围内可提交维修申请，具体请以厂家服务为准。 </div>
                <div style="margin: 15px 8px 15px;"> 您可以查询本品牌在各地售后服务中心的联系方式 </div>
                <div style="margin: 15px 8px 15px;"> 售后服务电话: 400-88-88888</div>
                <div style="margin: 15px 8px 15px;">品牌官方网站<a href="https://www.taobao.com" target="_blank">www.taobao.com</a></div>
                <van-divider>服务承诺</van-divider>
                <div style="margin: 15px 8px 15px;"> 
                    天天优选向您保证所售商品均为正品行货，
                    开具机打发票或电子发票。 凭质保证书及商城发票，
                    可享受全国联保服务，与您亲临商场选购的商品享受相同的质量保证，
                    请您放心购买！
                </div>
                <div style="margin: 15px 8px 15px;">
                    注：因厂家会在没有任何提前通知的情况下更改产品包装、产地或者一些附件，
                    本司不能确保客户收到的货物与商城图片、 产地、附件说明完全一致。
                    只能确保为原厂正货！并且保证与当时市场上同样主流新品一致。若本商城没有及时更新，请大家谅解！
                </div>
                <van-divider>权利声明</van-divider>
                <div style="margin: 15px 8px 15px;">
                    天天优选上的所有商品信息、客户评价、商品咨询、网友讨论等内容，
                    是商城重要的经营资源，未经许可，禁止非法转载使用。 
                </div>
                <div style="margin: 15px 8px 15px;">
                    本站商品信息均来自于厂商，其真实性、
                    准确性和合法性由信息拥有者（厂商）负责。本站不提供任何保证，并不承担任何法律责任。
                </div>
            </van-tab>
        </van-tabs>
        <!-- 底部操作栏 -->
        <div class="bottom-active">
            <van-action-bar>
                <van-action-bar-icon icon="chat-o" text="客服" color="#ee0a24" />
                <van-action-bar-icon icon="cart-o" text="购物车" to="/cart" :badge="totalAmount"/>
                <van-action-bar-icon icon="star" text="已收藏" color="#ff5000" />
                <van-action-bar-button type="warning" text="加入购物车" @click="handleAddToCart"/>
                <van-action-bar-button type="danger" text="立即购买" />
            </van-action-bar>
        </div>
    </div>
</template>

<script>
import { showSuccessToast } from 'vant';
import { getDetail } from '../../api/detail';
import { mapGetters } from 'vuex/dist/vuex.cjs.js';

export default {
    name: 'Detail',
    data() {
        return {
            active:0,
            detail:{},  //详情数据
        }
    },
    async created(){
        console.log(this.$route.query);
        // 获取待查询详情数据的商品编号 id
        const { id } = this.$route.query
        // 根据商品id查询商品详情数据
        const result = await getDetail(id)
        this.detail = result.detail
        console.log(this.detail);
        // console.log(result);
    },
    methods: {
        handleAddToCart() {
            //构建当前选购商品在购物车中保存的信息
            const { id,title,image,price } = this.detail
            const currGoods = {
                id,
                title,
                image,
                price,
            }
            console.log(currGoods);
            //加入购物车，将当前选购商品的信息保存到 store 中
            this.$store.commit('shoppingCart/addToCart', currGoods)
            //成功提示
            showSuccessToast({
                message: '加入购物车成功',
                duration: 1000
            })
        }
    },
    computed: {
        totalAmount(){
            return this.$store.getters['shoppingCart/totalAmount']
        },
        // ...mapGetters('shoppingCart',['totalAmount'])
        intPrice(){
            const intPrice = parseInt(this.detail.price)
            return intPrice
        },
        floorPrice(){
            //获取detail.price的小数部分
            const floatPrice = this.detail.price - parseInt(this.detail.price)
            let result = (floatPrice*100).toString().slice(0,2)
            return result
        }
    }
}
</script>

<style lang="scss" scoped>
.detail{
    display: flex;
    flex-direction: column;
    background-color: #f5f5f5;
    .goods{
        flex: 1;

        &-info{
            background-color: #fff;
            margin: 3px;
            border-radius: 8px;
        }
    }
    .bottom-active{
        height: 50px;
    }
}
</style>
